<template>
    <uni-popup ref="popup" type="bottom" :safe-area='false'>
   
         <view class="content">

            <view class="headBox">

                <text>用户隐私保护提示</text>

                <view class="close" @click.stop="closeBox">
                    <text class=" iconfont">&#xeca0;</text>
                </view>
               

            </view>

            <view class="in-box">

                <view class='words'>
                    <text>感谢您使用本程序，您使用本程序前应当阅井同意</text>
                    <button class="look-btn" @click="handleOpenPrivacyContract" >《用户隐私保护指引》</button>
                    <text>当您点击同意并开始时用产品服务时，即表示你已理解并同意该条款内容。</text>
                </view>
             

                <view class="btn-box">
                    <button
                        class="disgree-btn"
                        @click.stop="closeBox"
                    >
                        不同意
                    </button>

                    <button
                        id="agree-btn"
                        class="agree-btn"
                        open-type="agreePrivacyAuthorization"
                        @agreeprivacyauthorization="handleAgreePrivacyAuthorization"
                    >
                        同意
                </button>

                </view>

              
            </view>

        </view>
    </uni-popup>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup/uni-popup'

export default {
    props: ['initShow'],
    components: { uniPopup },
    data() {
        return {

            json:{}

        }
    },

    onShow() {},
    mounted() {

        //是否进来就提示 默认为false
        if(this.initShow){
            this.goPrival()
        }
      
    },
    methods: {
        openFunc () {

            this.$refs['popup'].open()
        },
        closeBox(){
            this.$refs['popup'].close()
        },
        goPrival(e) {
            uni.getPrivacySetting({
                success: (res) => {
                    console.log(res) // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }


                    this.json = res

                    if (res.needAuthorization) {
                        // 需要弹出隐私协议

                        // this.$emit('update:show', true)

                        this.openFunc()


                    } else {

                        this.finish()

                        // 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用已声明过的隐私接口
                        // wx.getUserProfile()
                        // wx.chooseMedia()
                        // wx.getClipboardData()
                        // wx.startRecord()
                    }
                },
                fail: () => {},
                complete: () => {},
            })
        },
        handleAgreePrivacyAuthorization() {
            // 用户同意隐私协议事件回调
            // 用户点击了同意，之后所有已声明过的隐私接口和组件都可以调用了
            // wx.getUserProfile()
            // wx.chooseMedia()
            // wx.getClipboardData()
            // wx.startRecord()

            this.finish()
        },
        handleOpenPrivacyContract() {
            // 打开隐私协议页面
            uni.openPrivacyContract({
                success: () => {}, // 打开成功
                fail: () => {}, // 打开失败
                complete: () => {},
            })
        },
        finish(){

            console.log('用户同意隐私协议事件回')

            this.closeBox()

            this.$emit('finish')

        }
    },
}
</script>

<style scoped lang="scss">
.content{
    background: #fff;
    border-radius: 26rpx 26rpx 0 0 ;
}
.headBox{
    position: relative;
    padding: 50rpx 40rpx 32rpx; 
    font-size: 34rpx;
    color: #000;
    line-height: 1.1;
    text-align: center;
    font-weight: bold;
    .close{
        position: absolute;
        right: 0;
        top: 0;
        width: 100rpx;
        text-align: center;
        padding: 30rpx;
        color: #777;
        font-size: 34rpx;
        z-index: 1;
    }
  
}
.in-box{
    padding:0 20px 20px;
    .words{
        margin-bottom:20px;
        font-size:26rpx;
        line-height: 1.8;
        color: #808999;
    }
}
.look-btn{
    display: inline;
    margin: 0;
    padding: 0;
    color: #1485ee;
    font-size:26rpx;
    line-height: 1.8;
    // color: #06ae56;
}
.btn-box{
    display: flex;
    justify-content: center;
    align-items: center;
    button{
        width: 110px;
        height: 44px;
        line-height: 44px;
        border-radius: 6px;
        text-align: center;
        font-size: 30rpx;
        margin: 0 15px;
    }
}
.disgree-btn{
    background: #f2f2f2;
    color: #07c160;
}
.agree-btn{
        background: #07c160;
        color: #fff;
    }

</style>
